﻿<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
    <div class="container">
        <a href="/" class="navbar-brand">Blazor Contoso University</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <NavLink class="nav-link" href="/" Match="NavLinkMatch.All">Home</NavLink>
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link" href="/about">About</NavLink>
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link" href="/students">Students</NavLink>
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link" href="/courses">Courses</NavLink>
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link" href="/instructors">Instructors</NavLink>
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link" href="/departments">Departments</NavLink>
                </li>
            </ul>

            <ul class="nav navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="http://blazor.net/" target="_blank">Built With Blazor</a>
                </li>
            </ul>

        </div>
    </div>
</div>


@*<div class="top-row pl-4 navbar navbar-dark">
        <a class="navbar-brand" href="/">BlazorContosoUniversity</a>
        <button class="navbar-toggler" onclick=@ToggleNavMenu>
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>

    <div class=@(collapseNavMenu ? "collapse" : null) onclick=@ToggleNavMenu>
        <ul class="nav flex-column">
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="/" Match=NavLinkMatch.All>
                    <span class="oi oi-home" aria-hidden="true"></span> Home
                </NavLink>
            </li>
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="/counter">
                    <span class="oi oi-plus" aria-hidden="true"></span> Counter
                </NavLink>
            </li>
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="/fetchdata">
                    <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
                </NavLink>
            </li>
        </ul>
    </div>*@

@functions {
bool collapseNavMenu = true;

void ToggleNavMenu()
{
    collapseNavMenu = !collapseNavMenu;
}
}
